<template>
  <div class="rankingList">
    <div class="rankingHeader">
      <div class="rankingCol rankingColNum">排名</div>
      <div class="rankingCol rankingColName">名称</div>
      <div class="rankingCol rankingColValue">收益</div>
    </div>

    <div class="rankingBody">
      <div
        class="rankingContent"
        :style="{
          transform: `translateY(${-scrollOffset}px)`,
          transition: isScrolling ? 'transform 0.5s ease-in-out' : 'none'
        }"
      >
        <div
          v-for="(item, index) in displayList"
          :key="`${item.id}-${index}`"
          class="rankingItem"
          :class="{ active: index % list.length < 3 }"
        >
          <div class="rankingCol rankingColNum">
            <span class="rankingIndex">{{ (index % list.length) + 1 }}</span>
          </div>
          <div class="rankingCol rankingColName">{{ item.name }}</div>
          <div class="rankingCol rankingColValue">{{ item.value }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'

const props = defineProps({
  list: {
    type: Array,
    default: () => []
  }
})

// 配置
const ITEM_HEIGHT = 90 // 项目高度（包含margin）
const SCROLL_INTERVAL = 3000 // 滚动间隔
const MIN_SCROLL_COUNT = 5 // 最小滚动数量

const scrollOffset = ref(0)
const isScrolling = ref(false)
let timer = null
let currentIndex = 0

// 判断是否需要滚动
const shouldScroll = computed(() => {
  return props.list.length > MIN_SCROLL_COUNT
})

// 复制两份数据用于无缝滚动
const displayList = computed(() => {
  return shouldScroll.value ? [...props.list, ...props.list] : props.list
})

// 滚动到下一项
const scrollToNext = () => {
  isScrolling.value = true
  scrollOffset.value += ITEM_HEIGHT

  // 当滚动到第一组数据末尾时
  if (currentIndex >= props.list.length - 1) {
    currentIndex = 0
    // 等待过渡动画完成后瞬间重置
    setTimeout(() => {
      isScrolling.value = false
      scrollOffset.value = 0
    }, 500)
  } else {
    currentIndex++
  }
}

// 开始轮播
const startScroll = () => {
  if (!shouldScroll.value) return
  stopScroll()

  currentIndex = 0
  scrollOffset.value = 0

  // 使用递归的 setTimeout 来实现轮播
  const scroll = () => {
    scrollToNext()
    timer = setTimeout(() => {
      scroll()
    }, SCROLL_INTERVAL)
  }

  // 启动首次轮播
  timer = setTimeout(scroll, SCROLL_INTERVAL)
}

// 停止轮播
const stopScroll = () => {
  if (timer) {
    clearTimeout(timer)
    timer = null
  }
}

// 监听数据变化
watch(
  () => props.list,
  () => {
    currentIndex = 0
    scrollOffset.value = 0
    isScrolling.value = false
    startScroll()
  },
  { deep: true }
)

onMounted(() => {
  startScroll()
})

onBeforeUnmount(() => {
  stopScroll()
})
</script>

<style scoped>
.rankingList {
  width: 100%;
  height: 100%;
  color: #fff;
}

.rankingHeader {
  display: flex;
  align-items: center;
  height: 80px;
  padding: 0 30px;
  background: rgba(255, 255, 255, 0.1);
  margin-bottom: 10px;
}

.rankingBody {
  height: calc(100% - 80px);
  overflow: hidden;
}

.rankingContent {
  will-change: transform;
}

.rankingItem {
  display: flex;
  align-items: center;
  height: 80px;
  margin-bottom: 10px;
  padding: 0 30px;
  background: rgba(255, 255, 255, 0.05);
}

.rankingItem.active {
  background: linear-gradient(90deg, rgba(0, 183, 255, 0.2), transparent);
}

.rankingCol {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rankingColNum {
  width: 120px;
  font-size: 28px;
}

.rankingColName {
  flex: 1;
  padding: 0 20px;
  font-size: 28px;
}

.rankingColValue {
  width: 200px;
  font-size: 28px;
  text-align: right;
}

.rankingIndex {
  display: inline-block;
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
}

.rankingItem.active .rankingIndex {
  background: #00b7ff;
}
</style>
